<template>
  <div> 
    <transition name="fade" >
      <div v-if="currentValue"  class="rain-picker-bg" @click="hideVisible"></div>
    </transition>
    <input type="text" v-model="currentValue" style="display:none" >
    <div v-if="currentValue" class="rain-picker" >
      <!-- head -->
      <div class="rain-picker-head" >
        <button class="rain-picker_cancel" >取消</button>
        <div class="rain-picker_title" >标题</div>
        <button class="rain-picker_confirm" >确认</button>
      </div>
      <!-- content -->
      <div class="rain-picker-content" >
        <div class="rain-picker-column">
          <div class="rain-picker_item" >
            <ul v-for="(item,index) in listData" :key="index" >
              <li>{{item.name}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>  
  </div>
</template>


<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"

@Component({
  components: {}
})
export default class Home extends Vue {
  // data
  listData:Array<any> = [
    {name:'a'},
    {name:'b'},
    {name:'c'},
    {name:'d'},
    {name:'e'},
    {name:'f'},
    {name:'g'},
    {name:'h'},
    {name:'i'},
    {name:'j'},
    {name:'k'},
    {name:'l'},
    {name:'m'},
    {name:'n'},
    {name:'o'},
    {name:'p'},
  ]
  // props
  @Prop(String) type!:string 
  @Prop(Boolean) value!:boolean 
  //data
  currentValue = this.value

  // watch
  @Watch('currentValue')
  getCurrentValue(val:any) {
    this.$emit('input',val)
  }
  @Watch('value')
  getShowVisible(val:any){
    this.currentValue = val
  }
  // method
  hideVisible(){
    this.currentValue = false
  }
}
</script>
<style lang="scss" scoped>
@import "../scss/picker.scss";
</style>
